<template>
    <div id="container">
        <div id="content">
            <el-card class="box-card">
                <div id="title">
                    用户信息
                </div>
                <!-- 用户信息 -->
                <div id="userName" class="infoItem">
                    昵称：{{ userStore.userInfo.name }}
                </div>
                <div id="email" class="infoItem">
                    邮箱：{{ userStore.userInfo.email }}
                </div>
                <div id="joinTime" class="infoItem">
                    注册日期：{{ userStore.userInfo.jointime }}
                </div>
                <div id="balanceBox" class="infoItem">
                    <div id="balance">
                        余额：<span style="color: red;">￥{{ userStore.userInfo.balance }}</span>
                    </div>
                    <el-button plain class="myBtn" @click="dialogVisible = true">充值</el-button>
                </div>
            </el-card>
            <el-card class="box-card">
                <div id="title">
                    拍卖信息
                </div>
                <div id="userName" class="infoItem">
                    总拍下：{{ userStore.userInfo.buyingNumber }}
                </div>
                <div id="userName" class="infoItem">
                    总发布：{{ userStore.userInfo.publishNumber }}
                </div>
            </el-card>
        </div>
        <!-- 拥有的竞品列表 -->
        <div id="aucProductListBox">
            <!-- 标题 -->
            <div id="aucProListTitle">
                持有竞品
            </div>
            <div id="productListBox">
                <el-card class="box-card1" v-for="(item, index) in aucProductList" :key="index">
                    <div class="pro_pic">
                        <img :src="BASEURL + '/commons/download?picName=' + item.pictureName" alt="">
                    </div>
                    <div class="pro_name">
                        {{ item.name }}
                    </div>
                    <div class="pro_price">
                        ￥{{ item.price }}
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 对话框【充值】 -->
        <el-dialog 
            v-model="dialogVisible" 
            title="|- 充值 -|" 
            width="30%"
        >
            <el-input v-model="money" placeholder="输入充值金额" oninput="value=value.replace(/[^0-9.]/g,'')" class="money"/>
            <el-input v-model="checkCOde" placeholder="输入验证码" class="checkCode"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="top_up">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useUserStore } from '../stores/user';
import { onMounted, inject, ref } from 'vue'
import md5 from "js-md5"
import { ElMessage } from 'element-plus';

// 请求根路径
const BASEURL = inject('apiBaseUrl');
// 是否显示对话框
const dialogVisible = ref(false)
// 用户信息
const userStore = useUserStore();
// 用户持有的竞品列表
let aucProductList = ref([]);
// 充值的金额
let money = ref();
// 验证码
let checkCOde =  ref("");
// 成功挂载的钩子
onMounted(() => {
    // 获取用户持有的竞品
    getAucProductList();
    // 页面挂载完毕获取获取用户信息
    getUserData();
})


// 充值按钮触发
async function top_up(){

    // 验证输入：1.是否为空 2.验证码是否正确
    if(money.value == undefined || checkCOde.value == ""){
        ElMessage("输入不能为空!")
        return;
    }

    if(md5(checkCOde.value) != "82039d16dce0aab3913b6a7ac73deff7"){
        ElMessage("验证码验证失败!");
        return;
    } 

    // 计算当前金额
    console.log();
    
    let sum = parseInt(userStore.userInfo.balance) + parseInt(money.value); 

    console.log(sum);
    
    // 发送充值请求
    await axios.put(`${BASEURL}/users/updateBalance/${userStore.userInfo.uid}/${sum}`);
    
    // 清空输入，关闭对话框
    money.value = null;
    checkCOde.value = "";
    dialogVisible.value = false;

    // 重新获取用户信息
    getUserData();
}   

// 获取用户信息
async function getUserData(){
    const res =  await axios.get(`${BASEURL}/users/${userStore.userInfo.uid}`);
    userStore.setUserInfo(res.data.data)
}

// 获取用户持有的竞品列表
async function getAucProductList() {
    const res = await axios.get(`${BASEURL}/auctionProducts/getAllByName/${userStore.userInfo.name}`);
    aucProductList.value = res.data.data
}

</script>


<style scoped>
#container {
    background-color: #f6f0e7;
    height: 100%;
}

.box-card {
    width: 320px;
    margin-top: 10px;
    margin-left: 20px;
    padding: 10px 0px;
}

.box-card1 {
    width: 320px;
    position: relative;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
}

.pro_name {
    text-align: center;
    margin-top: 5px;
}

.pro_price {
    text-align: center;
    margin-top: 5px;
    color: red;
}


.pro_pic img {
    width: 90%;
    height: 250px;
    margin-left: 20px;
}

#productListBox {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow-y: auto;
}

#content {
    display: flex;
}

#aucProductListBox {
    width: 98%;
    margin: 0 auto;
    margin-top: 10px;
    background-color: #f6f0e7;
}

#aucProListTitle {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    box-shadow: 0px 0px 5px black;
}

#title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    border-bottom: #efeded solid 1px;
    padding-bottom: 5px;
}

.infoItem {
    margin-top: 20px;
}

#balanceBox {
    display: flex;
}

.myBtn {
    margin-top: -4px;
    margin-left: 10px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.checkCode{
    margin-top: 10px;
}
</style>

